<template>
  <template v-for="item in props.menuData" :key="item.menuCode">
    <el-sub-menu
      popper-class="custom-menu-popper"
      :index="item.url"
      v-if="item.childList"
    >
      <template #title v-if="item.icon !== ''">
        <!-- <em :class="item.icon"></em> -->
        <span class="tbdfont icon" :class="item.icon"></span>
        <span v-text="item.menuName"></span>
      </template>
      <template #title v-else
        ><span>{{ item.menuName }}</span></template
      >

      <subItem :menuData="item.childList"></subItem>
    </el-sub-menu>

    <el-menu-item
      :index="item.url"
      v-if="!item.childList && item.icon === ''"
      :disabled="item.url === ''"
      >{{ item.menuName }}</el-menu-item
    >
    <el-menu-item
      :index="item.url"
      v-if="!item.childList && item.icon !== ''"
      :disabled="item.url === ''"
    >
      <!-- <em :class="item.icon" v-if="item.icon !==''"></em> -->
      <span class="tbdfont icon" :class="item.icon"></span>
      <template #title>{{ item.menuName }}</template>
    </el-menu-item>
  </template>
</template>


<script setup>
import subItem from "./subMenu.vue";

const props = defineProps({
  menuData: {
    type: Array,
    default: [],
  },
});
</script>

<style scoped lang="scss">
.icon {
  margin-right: pxTvw(12);
}
</style>

